<script setup>
/**
 * @import libs
 */
import { storeToRefs } from 'pinia'

/**
 * @import components
 */
import recommendedPost from "@/components/indexComp/recommendedPost.vue";
import popularActivity from "@/components/indexComp/popularActivity.vue";
import placeholderPage from "@/components/commons/placeholderPage.vue";

/**
 * @import pinia stores
 */

//pinia -> useIndexStaticMessStore
import { useIndexStaticMessStore } from '@/stores/index/indexStaticMess'

/**
 * @param recommendedPostList 推荐帖子列表
 * @param activityMessList 活动信息列表
 */
let { recommendedPostList, activityMessList,recommendPartIndex,popularActivityIndex,attentionPartIndex } = storeToRefs(useIndexStaticMessStore())

//pinia -> homePage
import { useHomePageStore } from '@/stores/index/homePage'

/**
 * @param selectedTopBarIndex 主页顶部导航栏下标
 */
let { selectedTopBarIndex, refresherTriggeredState} = storeToRefs(useHomePageStore())

/**
 * @function refreSherreFresh 下拉刷新被触发
 */
const {refreSherreFresh} = useHomePageStore()

</script>

<template>
    <div>
        <scroll-view @refresherrefresh="refreSherreFresh" :refresher-triggered="refresherTriggeredState" refresher-enabled="true" scroll-y="true" show-scrollbar="false" class="index-center-scroll-view">
            <div class="index-center">
                <div v-if="selectedTopBarIndex === recommendPartIndex" class="recommended-post-class">
                    <recommendedPost v-for="(item, index) in recommendedPostList" :key="item.id" :item="item">
                    </recommendedPost>
                </div>
                <div v-else-if="selectedTopBarIndex === popularActivityIndex" class="popular-activity-class">
                    <popularActivity v-for="(item,index) in activityMessList" :key="item.id" :item="item"></popularActivity>
                </div>
                <div v-else-if="selectedTopBarIndex === attentionPartIndex">
                    <placeholderPage></placeholderPage>
                </div>
            </div>
        </scroll-view>
    </div>
</template>

<style scoped>

.popular-activity-class{
    width: 640rpx;
    margin: 30px auto;
}

.index-center-scroll-view {
    height: 80vh;
}

.recommended-post-class {
    margin: 30px auto;
    width: 640rpx;
}
</style>